<template>
  <div :class="`col-${span}`" class="col" ref="col">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'zCol',
  data () {
    return {
      gutter: '0'
    }
  },
  watch: {
    gutter (newVal) {
      if (newVal) {
        this.$refs.col.style.marginLeft = Number(newVal / 2) + 'px'
        this.$refs.col.style.marginRight = Number(newVal / 2) + 'px'
      }
    }
  },
  props: {
    span: {
      type: String
    }
  }
}
</script>

<style scoped lang="scss">
.col {
  $class-prefix: col-;
  @for $n from 1 through 24 {
    &.#{$class-prefix}#{$n} {
      width: ($n / 24) * 100%;
    }
  }
}
</style>
